<template>
  <s-layout
    title="社群"
    color="#333"
    navbar="inner1"
    :bgStyle="{
      src: theme.background_image,
      color: '#fff',
    }"
    :onShareAppMessage="{
      title: '邀请好友加入',
      path: `/association/pppp_i?user_id=${state.user_id}&invite_code=${state.invite_code}`,
      image: state.article?.files_list[0].image,
    }"
  >
    <assNavbar title="话题">
      <view
        style="height: 44px"
        class="ss-flex"
        v-if="state.article.user"
      >
        <view
          style="padding-left: 80rpx; width: 400rpx"
          class="ss-flex align-center"
          :style="{ color: theme.title_color }"
        >
          <image
            style="height: 70rpx; width: 70rpx; border-radius: 50%; margin-right: 20rpx"
            :src="
              state.article.user.avatar
                ? cdnUrl(state.article.user.avatar)
                : 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250416/e7a91c64184dcd5646b290bf14be3b86.png'
            "
            mode=""
          ></image>
          <view
            style="flex: 1"
            class="ss-line-1"
          >{{ state.article.user.nickname }}</view>
        </view>
      </view>
      <template #right>
        <button
          v-if="state.pageData.is_me == 0"
          @click="state.showShare = true"
          class="ss-reset-button"
        >
          <view
            class="_aicon-zhuanfa"
            style="color: #333; font-size: 40rpx; padding: 0 20rpx"
            :style="{ color: theme.title_color }"
          ></view>
        </button>
        <button
          @click="state.moreOption.show_popup = true"
          class="ss-reset-button btn-box"
          v-else
        >
          <image
            class="img"
            src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250326/08450a11579792297d3335db90224e10.png"
            mode="scaleToFill"
          />
        </button>
      </template>
    </assNavbar>
    <su-swiper
      v-if="state.swiperList.length"
      :isPreview="true"
      imageMode="aspectFill"
      :seizeHeight="500"
      :circular="true"
      :list="state.swiperList"
    ></su-swiper>
    <view class="article">
      <view
        v-if="state.type != 'note' && state.article.title"
        class="article-title"
      >
        {{ state.article.title }}
      </view>
      <view
        class="article-suggest"
        v-else-if="state.type == 'note' && state.article.title"
      >
        <assSuggest :data="state.promotion[0]"></assSuggest>
        <view class="line"></view>
      </view>

      <view
        class="article-section"
        v-for="articleData in [state.article.assistants]"
        :key="articleData"
      >
        <view
          class="article-taste"
          v-if="state.type == 'note'"
        >
          体验{{ articleData.days || 0 }}天后
        </view>

        <view
          v-if="state.type == 'note'"
          class="article-title"
        >
          {{ state.article.title }}
        </view>

        <view
          class="article-content"
          :class="{ solid: state.type == 'note' }"
        >
          <text>{{ articleData.content }}</text>
        </view>

        <view
          class="article-content"
          v-if="state.article.goods.id"
          @click="sheep.$router.go(state.article.goods.link)"
        >
          <text>点击前往详情👇</text>
          <div class="card_info">
            <div class="left">
              <image
                :src="state.article.goods.image"
                mode=""
              />
            </div>
            <div class="right">
              <div class="tit">{{ state.article.goods.title }}</div>
              <!-- <div class="sub_title">{{ state.article.goods.sub_title }}</div> -->
              <div class="price">￥{{ state.article.goods.price }}</div>
            </div>
          </div>
        </view>

        <view
          class="article-content"
          v-if="state.article.store.id"
          @click="sheep.$router.go(state.article.store.link)"
        >
          <text>点击前往详情👇</text>
          <div class="card_info">
            <div class="left">
              <image
                :src="state.article.store.image"
                mode=""
              />
            </div>
            <div class="right">
              <div class="tit">{{ state.article.store.title }}</div>
              <view class="star">
                <uni-rate
                  :value="Number(state.article.store.mark)"
                  color="#ccc"
                  :size="14"
                  active-color="#36baa9"
                />
                <text>{{ state.article.store.mark }}</text>
              </view>
              <div class="price">￥{{ state.article.store.price }}</div>
            </div>
          </div>
        </view>

        <view class="hotspot ss-flex ss-row-between">
          <view class="ss-flex title">{{state.sort == 'likes'?'热评':'最新'}}<view>查看</view>
          </view>
          <view
            class="ss-flex set"
            @click="setComment"
          >
            <view :style="{ backgroundColor: state.sort == 'likes' ? theme.btn_background_color : '' }">热度</view>
            <view class="line"></view>
            <view :style="{
                backgroundColor: state.sort == 'createtime' ? theme.btn_background_color : '',
              }">最新</view>
          </view>
        </view>
        <view
          v-if="articleData.comment.length"
          class="article-comment"
        >
          <assComment
            v-for="item in articleData.comment"
            :key="item.updatatime"
            :contnet="item"
            @del="commentDel"
            @like="commentLike"
            @comment="comment(item)"
          >
            <assComment
              child
              v-for="childData in isFold(item.comment_id) ? item.child : item.child.slice(0, 1)"
              :key="childData.updatatime"
              @del="commentDel"
              @like="commentLike"
              :contnet="childData"
              @comment="comment({ ...childData, fa_comment_id: item.comment_id })"
            ></assComment>
            <view
              v-if="!isFold(item.comment_id) && item.child.length > 1"
              class="childShow"
              :style="{ color: theme.collapse_color }"
              @click="state.commentFold.push(item.comment_id)"
            >展开{{ item.child.length - 1 }}条回复</view>
          </assComment>
        </view>
        <view
          v-else
          style="color: #999"
        >暂无评论</view>
        <view
          v-if="state.type == 'note' && state.article.title"
          class="find-reply-input ss-flex ss-row-between ss-flex-1"
        >
          <view class="input-icon _aicon-bianji ss-m-l-15"></view>
          <input
            @confirm="articleCommentConfirm($event, articleData.id, articleData)"
            v-model="articleData.commentText"
            class="ss-flex-1"
            confirm-type="send"
            cursor-spacing="85rpx"
            :always-embed="true"
            placeholder-style="color:#A8A8A8;font-size:26rpx"
            type="text"
            placeholder="我也评论下"
          />
        </view>
      </view>
    </view>
    <!--  -->
    <assGuess :list="state.article.recommend"></assGuess>
    <assReply
      :placeholder="state.placeholder"
      :focus="state.focus"
      @reply="findComment"
      @cancel="state.focus = false"
    ></assReply>
    <assArticleTab
      v-if="state.type != 'note' && state.article.title"
      :articleData="state.article"
      @comment="comment"
      @likeSet="findCollection"
      @collection="collection"
    ></assArticleTab>

    <popupShare
      v-model:show="state.showShare"
      :findId="state.article.find_id"
    ></popupShare>
    <!-- 底部弹窗、更多 -->
    <su-popup
      :show="state.moreOption.show_popup"
      position="bottom"
      round="20"
      :overlay="true"
      @close="close_moreOption_popup"
      class="back-box"
    >
      <view class="more-popup">
        <view class="share-popup__content ss-flex justify-around">
          <view class="share-item ss-flex-col justify-center align-center">
            <button
              class="share-button"
              @click="stickyCli"
            >
              <div class="img-box">
                <image
                  class="share-icon moments-icon"
                  src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250326/e61b42924b96e6ce246e9114e9f6a1aa.png"
                  mode=""
                />
              </div>
              <view class="share-text">{{state.pageData.pinned==0?'置顶':'取消置顶'}}</view>
            </button>
          </view>
          <view class="share-item ss-flex-col justify-center align-center">
            <button
              class="share-button"
              @click="shear_show()"
            >
              <div class="img-box">
                <image
                  class="share-icon qrcode-icon"
                  src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250326/4f276546686e01e246c9c1674f683822.png"
                  mode=""
                />
              </div>
              <view class="share-text">分享</view>
            </button>
          </view>
          <view class="share-item ss-flex-col justify-center align-center">
            <button
              class="share-button"
              @click="removeCli"
            >
              <div class="img-box">
                <image
                  class="share-icon moments-icon"
                  src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250326/b65924d2ec5bf779a713cd9add26006a.png"
                  mode=""
                />
              </div>
              <view class="share-text">删除</view>
            </button>
          </view>

        </view>

        <view
          class="btn__cancel ss-m-t-20"
          @click="close_moreOption_popup"
        >取消</view>
      </view>
    </su-popup>
    <su-popup
      :show="state.removeOption.clim_popup"
      position="bottom"
      round="20"
      :overlay="true"
      @close="close_remove_popup"
    >
      <view
        class="title-box"
        @click="removeClim"
      >
        <view class="title-header">删除作品</view>
        <view class="title-mess">作品将永久删除并且无法找回</view>
      </view>
      <view
        class="btn__cancel ss-m-t-20"
        @click="close_remove_popup"
      >取消</view>
    </su-popup>
  </s-layout>
</template>

<script setup>
import { cdnUrl } from '@/association/utils';
import assNavbar from '@/components/ass-navbar.vue';
import assComment from './components/ass-comment.vue';
import assArticleTab from './components/ass-article-tab.vue';
import assSuggest from './components/ass-suggest.vue';
import assGuess from './components/ass-guess.vue';
import assReply from './components/ass-reply.vue';
import API from '../api';
import association from '@/association/store';
import sheep from '@/sheep';

import popupShare from './components/popup-share.vue';
import suPopup from '@/sheep/ui/su-popup/su-popup.vue';
import {
  onLoad,
  onShow,
  onUnload,
  onPullDownRefresh,
  onShareAppMessage,
  onShareTimeline,
} from '@dcloudio/uni-app';
import { computed, reactive, nextTick } from 'vue';
const theme = computed(() => association().theme);

const template = computed(() => sheep.$store('app').template.user);

const state = reactive({
  showShare: false,
  // 文章id
  id: '',
  // 文章类型
  type: 'share',
  loading: false,
  // 回复评论的userID
  comment_id: 0,
  // 评论折叠控制
  commentFold: [],
  // 回复文章片段id
  assistant_id: 0,
  // 评论排序
  sort: 'likes',
  promotion: [],
  // 回复对象的userID
  to_user_id: 0,
  // 回复框是否显示
  focus: false,
  // 回复框占位符
  placeholder: '',
  //  分享默认数据
  shareData: {
    title: '话题',
    path: '/association/pages/talk',
    image: '',
    desc: '',
  },
  // 文章数据
  article: {},
  // 轮播图数据
  swiperList: [],
  // 页面传递参数
  pageData: {},
  moreOption: {
    show_popup: false
  },
  removeOption: {
    clim_popup: false
  }
});
onUnload(() => {
  setTimeout(() => {
    uni.$emit('setCollection', {
      id: state.id,
      is_likes: state.article.is_likes,
    });
  }, 50);
});

onShareTimeline(() => {
  return {
    title: '分享',
    query: `user_id=${state.user_id}&invite_code=${state.invite_code}`,
  };
});
// 关闭弹窗
const close_moreOption_popup = () => {
  state.moreOption.show_popup = false
};
// 删除弹窗
const close_remove_popup = () => {
  state.removeOption.clim_popup = false;
};
// 置顶
const stickyCli = () => {
  const { find_id, pinned } = state.pageData
  const param = {
    type: pinned == 0 ? 'pinned' : 'cancel',
    find_id,
  }
  API.stickyApi(param).then((res) => {
    const { code } = res
    uni.showToast({
      icon: 'none',
      title: res.msg,
    });
    if (code) {
      if (pinned == 0) {
        state.pageData.pinned = 1
      } else {
        state.pageData.pinned = 0
      }
    }
  });
};

// 删除
const removeCli = () => {
  state.removeOption.clim_popup = true;
};

const removeClim = () => {
  const { find_id, pinned } = state.pageData;
  const params = {
    find_id: state.id,
  }
  API.removeContent(params).then((res) => {
    uni.showToast({
      icon: 'none',
      title: res.msg,
    });
    const { code } = res
    if (code) {
      close_remove_popup()
      close_moreOption_popup()
      setTimeout(() => {
        sheep.$router.back();
      }, 500)
    }
  });
};
// 分享
const shear_show = () => {
  close_moreOption_popup()
  state.showShare = true
}
const isFold = (id) => {
  return state.commentFold.includes(id);
};
const collection = async () => {
  let res = await API.info.collection({
    find_id: state.id,
  });
  state.article.is_collection = res.data.is_collection;
};
const setComment = async () => {
  state.sort = state.sort == 'likes' ? 'createtime' : 'likes';
  let res = await API.getFindDetails({
    find_id: state.id,
    sort: state.sort,
  });
  state.article.assistants = res.data.assistants;
};
const findComment = async (e) => {
  let data = {
    find_id: state.id,
    content: e.content,
    comment_id: state.comment_id,
    to_user_id: state.to_user_id,
    assistant_id: state.assistant_id,
  };
  let res = await API.findComment(data);
  if (res.code == 1) {
    if (!isFold(state.comment_id)) {
      state.commentFold.push(state.comment_id);
      console.log(state.commentFold);

    }
    uni.showToast({
      icon: 'none',
      title: '评论成功',
      duration: 1000,
    });
    getFindDetails();
  }
};

const articleCommentConfirm = (e, id, articleData) => {
  console.log(e, id);
  let text = e.detail.value;
  state.comment_id = 0;
  state.to_user_id = 0;
  state.assistant_id = id;
  findComment({
    content: text,
  });
  articleData.commentText = '';
};

const findCollection = async () => {
  let res = await API.findLike({
    find_id: state.id,
  });
  if (res.code) {
    state.article.is_likes = res.data.is_like;
    if (state.article.is_likes) {
      state.article.likes += 1;
    } else {
      state.article.likes -= 1;
    }
  }
};
const comment = (data) => {
  state.focus = false;
  state.assistant_id = state.article.assistants.id;
  if (data) {
    state.comment_id = data.fa_comment_id != undefined ? data.fa_comment_id : data.comment_id;
    state.to_user_id = data.user_id;
  } else {
    state.comment_id = 0;
    state.to_user_id = 0;
  }
  nextTick(() => {
    state.focus = true;
    state.placeholder = data ? '回复：' + data.nickName : '评论';
  });
};
const commentDel = (e) => {
  uni.showModal({
    title: '提示',
    content: '删除后无法恢复',
    success: async (res) => {
      if (res.confirm) {
        let res = await API.findDelComment({
          comment_id: e.comment_id,
        });
        if (res.code) {
          uni.showToast({
            icon: 'none',
            title: '删除成功',
            duration: 1000,
          });
          getFindDetails();
        }
      } else if (res.cancel) {
        // uni.showToast({
        // 	icon:'none',
        // 	title:'取消删除',
        // 	duration:1000
        // })
      }
    },
  });
};
const commentLike = async (e) => {
  console.log(e);
  let res = await API.findCommentLike({
    comment_id: e.comment_id,
  });
  console.log(res);
  if (res.code) {
    // getFindDetails();
    e.is_likes = !!res.data.is_like;
    if (e.is_likes) {
      e.likes += 1;
    } else {
      e.likes -= 1;
    }
  }
};

const findForward = async (e) => {
  let res = await API.findForward({
    find_id: state.id,
  });
  if (res.code) {
    state.article.forward += 1;
  }
};

const isVideo = (link) => {
  const mp4 = /.*\.mp4$/;
  const MP4 = /.*\.MP4$/;
  return mp4.test(link) || MP4.test(link);
};
const getFindDetails = async () => {
  state.loading = true;
  let res = await API.getFindDetails({
    find_id: state.id,
    sort: state.sort,
  });
  state.loading = false;
  if (res.data) {
    let article = res.data;
    state.article = { ...article, is_likes: state.article.is_likes };
    state.swiperList = res.data.files_list.map((e) => {
      return {
        url: '',
        type: e.image.includes('.mp4') || e.image.includes('.MP4') ? 'video' : 'image',
        title: state.type == 'note' ? e.title : '',
        src: cdnUrl(e.image),
      };
    });
    state.shareData = {
      title: state.article.title,
      path: `/association/pages/find?id=${state.id}&type=${state.type}`,
      image: cdnUrl(
        state.article.image +
        (isVideo(state.article.image) ? '?x-oss-process=video/snapshot,t_0,f_jpg' : ''),
      ),
    };

    if (state.promotion.length) return;
    let goods = article.assistants.goods_promotion;
    if (goods) {
      goods.type = 'goods';
      goods.name = '商品';
      state.promotion.push(goods);
    }

    let group = article.assistants.group_promotion;
    if (group) {
      goods.type = 'group';
      goods.name = '套餐';
      state.promotionpush(group);
    }

    let store = article.assistants.store_promotion;
    if (store) {
      goods.type = 'store';
      goods.name = '店铺';
      state.promotion.push(store);
    }
  }
};

function get_invite_id () {
  // 获取邀请码
  sheep.$api.tuangou.getUserQrCode().then((res) => {
    if (res.error == 0) {
      state.invite_code = res.data.invite_code;
    }
  });

  // 获取用户id
  let user_info = uni.getStorageSync('user-store');
  user_info = JSON.parse(user_info);
  if (user_info) {
    state.user_id = user_info.userInfo.id;
  }
}

onLoad((e) => {
  state.pageData = e;
  state.id = e.id;
  state.type = e.type;
  state.article.is_likes = e.is_likes == 1 ? true : false;
  if (e.invite_code) {
    let invite_code = e.invite_code;
    uni.setStorageSync('invite_code', invite_code);
  }

  get_invite_id();
  getFindDetails();
});

// 分享给朋友的回调
onShareAppMessage(() => {
  return {
    title: '分享',
    path: `/association/index?user_id=${state.user_id}&invite_code=${state.invite_code}`,
    imageUrl:
      'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250311/67eaf80805de0e0d23b6011970091ae7.png',
  };
});

onShareTimeline(() => {
  return {
    title: '分享',
    query: 'invite_code=' + state.invite_code,
  };
});
</script>

<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scope>
@import '@/association/scss/index.scss';
.title-box {
  padding: 20rpx 0 5rpx 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  // justify-content: center;
  .title-header {
    font-size: 28rpx;
    color: #3d3d3d;
    text-align: center;
  }
  .title-mess {
    font-size: 24rpx;
    color: #87868a;
    margin-top: 10rpx;
    text-align: center;
  }
  // 取消按钮
  .cancel-btn {
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    font-size: 32rpx;
    color: #333;
    margin-top: 20rpx;
    border-top: 1rpx solid #eeeeee;
    background: #fff;
  }
}
view {
  box-sizing: border-box;
}
// 好友 分享弹窗样式
.more-popup {
  padding: 30rpx;
  background-color: #ffff;

  .share-popup__content {
    display: flex;
    flex-direction: row;
  }

  &__title {
    font-size: 32rpx;
    text-align: center;
    color: #333;
    margin-bottom: 40rpx;
  }

  &__content {
    padding: 20rpx 0;
  }

  &__cancel {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 32rpx;
    color: #333;
    border-top: 1rpx solid #eee;
  }

  .share-item {
    padding: 10rpx;
    .share-button {
      background: transparent;
      border: none;
      padding: 0;
      margin: 0;
      line-height: normal;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .img-box {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        // background: #f2f3f6;
      }

      &::after {
        border: none;
      }
    }

    .share-icon {
      width: 70rpx;
      height: 70rpx;
    }

    .share-text {
      font-size: 28rpx;
      color: #3d3d3d;
      margin-top: 10rpx;
    }
  }
}
.btn__cancel {
  height: 90rpx !important;
  line-height: 90rpx !important;
  text-align: center !important;
  font-size: 32rpx !important;
  color: #333 !important;
  border-top: 1rpx solid #eee !important;
  background-color: #fff !important;
}
.btn-box {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;

  .img {
    width: 100%;
    height: 100%;
  }
}
.hotspot {
  margin-bottom: 25rpx;
  .title {
    color: #ff6c18;
    font-size: 30rpx;

    & > view {
      font-size: 28rpx;
      color: #3d3d3d;
    }
  }

  .set {
    .line {
      padding: 0px !important;
      width: 3rpx;
      height: 40rpx;
      background-color: #f6f6f6;
    }
    .active {
      background-color: #b5f8ff;
    }
    & > view {
      height: 40rpx;
      padding: 10rpx;
      font-size: 18rpx;
      color: #3d3d3d;
    }
  }
}

.article {
  margin-bottom: 20rpx;

  & > view {
    margin: 20rpx 20rpx 0;
  }

  .article-title {
    color: #3d3d3d;
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 20rpx;
  }

  .article-suggest {
    position: relative;
    padding-bottom: 10rpx;

    .line {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-color: #f6f5f6;
      height: 10rpx;
      width: 100vw;
    }
  }

  .solid {
    border-bottom: 1rpx solid #dcdcdc !important;
  }

  .article-content {
    color: #3d3d3d;
    font-size: 28rpx;
    margin-bottom: 20rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx dashed #c1c1c1;

    .star {
      display: flex;
      align-items: center;
      font-size: 18rpx;
      color: #222;
      text-indent: 10rpx;
    }
  }

  .article-taste {
    margin-bottom: 15rpx;
    color: #fff;
    display: inline-block;
    padding: 10rpx 15rpx;
    font-size: 32rpx;
    border-radius: 20rpx;
    line-height: 1;
    background-color: #0ad5ea;
  }
  .find-reply-input {
    margin-top: 20rpx;
    background-color: #f6f5f6;
    height: 30px;
    border-radius: 15px;

    .input-icon {
      width: 50rpx;
      font-size: 35rpx;
      color: #a8a8a8 !important;
    }
  }
  .article-comment {
    & > view {
      border-bottom: 1rpx solid #dcdcdc;
      margin-bottom: 15rpx;

      &:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
      }
    }

    .childShow {
      padding-left: 20rpx;
      font-size: 24rpx;
      margin-bottom: 15rpx;
      color: #1bbdce;
    }
  }
}

.talkList-item {
  margin: 20rpx 20rpx 0;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;

  & > image {
    height: 176rpx;
    width: 176rpx;
    min-width: 176rpx;
    margin-right: 25rpx;
  }

  .talk-info {
    position: relative;
    height: 176rpx;
    max-height: 176rpx;
    color: #3d3d3d;

    .talk-icon {
      position: absolute;
      top: 0;
      right: 0;
    }

    .talk-title {
      font-size: 32rpx;
    }

    .talk-bottom {
      color: #666;
      font-size: 24rpx;

      & > view {
        width: 100rpx;
        height: 40rpx;
        font-size: 20rpx;
        border-radius: 20rpx;
        color: #1bbdce;
        line-height: 40rpx;
        text-align: center;
        background: #b5f8ff;
      }
    }

    .talk-data {
      color: #666;
      font-size: 24rpx;

      & > view {
        width: 33%;

        & > view {
          display: inline-block;
          color: #0ad5ea;
        }
      }
    }
  }
}
.card_info {
  display: flex;
  padding: 20rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin-top: 20rpx;

  .left {
    width: 160rpx;
    height: 160rpx;
    margin-right: 15rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
    }
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15rpx;
    border-radius: 11rpx;
    background-color: #e7faf8;

    .tit {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
      line-height: 1.4;
    }

    .sub_title {
      font-size: 24rpx;
      color: #666;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .price {
      font-size: 32rpx;
      color: #ff6c18;
      font-weight: bold;
    }
  }
}
</style>
